<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

            @keyframes spin{
                0%{
                    transform: rotateX(0) rotateY(0);
                }
    
                100%{
                     transform: rotateX(360deg) rotateY(360deg);
                }
            }
    
            html{
                height:100%;
            }
            body{
                margin: 0px;
                height: 100%;
                /* 渐变背景色 */
                background:radial-gradient(white,green);
    
                display: flex;
                justify-content: center;
                align-items: center;
                
                /* 设置3d视角距离 */
                perspective: 1000px;
            }
            #box{
                width: 300px;
                height: 300px;
                /* border: solid 10px yellow;  */
                position: relative;
                /* 自身发生变形时，保留子元素的3D表型效果 */
                transform-style: preserve-3d;
    
                animation-name: spin;
                animation-duration: 10s;
                animation-timing-function: linear;
                animation-iteration-count: infinite;
    
               
            }
            .pic{
                width: 300px;
                height:300px;
                position: absolute;
                left: 0;
                top: 0;

                transition: all 1s;
                /* box-sizing: border-box;
                border:solid 2px yellow; */
            }
            .spic{
                width: 150px;
                height:150px;
                position: absolute;
                left: 75px;
                top: 75px;

                

            }
            #s-front{
                transform:translateZ(75px);
            }
            
    
            #s-back{
                transform:translateZ(-75px);
            }
            
    
            #s-top{
                transform:translateY(-75px) rotateX(90deg);
            }
            
    
            #s-bottom{
                transform:translateY(75px) rotateZ(-90deg)  rotateY(90deg);
            }
            
    
            #s-left{
                transform: translateX(-75px) rotateY(90deg);
            }
            
    
            #s-right{
                transform: translateX(75px) rotateY(90deg);
            }
            
       
    
            #front{
                transform:translateZ(150px);
            }
            #box:hover #front{
                transform:translateZ(240px) rotateX(-180deg);
            }
    
            #back{
                transform:translateZ(-150px) rotateX(-180deg);
            }
            #box:hover #back{
                transform:translateZ(-240px);
            }
    
            #top{
                transform:translateY(-150px) rotateX(90deg);
            }
            #box:hover #top{
                transform:translateY(-240px) rotateX(-90deg);
            }
    
            #bottom{
                transform:translateY(150px) rotateZ(-90deg)  rotateY(90deg);
            }
            #box:hover #bottom{
                transform:translateY(240px) rotateZ(90deg)  rotateY(90deg);
            }
    
            #left{
                transform: translateX(-150px) rotateY(90deg);
            }
            #box:hover #left{
                transform: translateX(-240px) rotateY(-90deg);
            }
    
            #right{
                transform: translateX(150px) rotateY(90deg);
            }
            #box:hover #right{
                transform: translateX(240px) rotateY(-90deg);
            }
       
       
        </style>
    </head>
    <body>
        <div id="box">
            <img src="1.jpg" alt="" class="pic" id="front">
            <img src="2.jpg" alt="" class="pic" id="back">
            <img src="3.jpg" alt="" class="pic" id="top">
            <img src="4.jpg" alt="" class="pic" id="bottom">
            <img src="5.jpg" alt="" class="pic" id="left">
            <img src="6.jpg" alt="" class="pic" id="right">


            <img src="1.jpg" alt="" class="spic" id="s-front">
            <img src="2.jpg" alt="" class="spic" id="s-back">
            <img src="3.jpg" alt="" class="spic" id="s-top">
            <img src="4.jpg" alt="" class="spic" id="s-bottom">
            <img src="5.jpg" alt="" class="spic" id="s-left">
            <img src="6.jpg" alt="" class="spic" id="s-right">
        </div>
    </body>
    </html>
    